<template>
	<view class="pd20">
		<view class="">
			<imgTypeTab :imgTypeList="auditTypeList" ref="imgTypeTab1" @tabSelect="tabSelect1"></imgTypeTab>
		</view>
		<view class="mb-3">
			<imgTypeTab :imgTypeList="imgTypeList" ref="imgTypeTab" @tabSelect="tabSelect"></imgTypeTab>
		</view>

		<template v-if="currentImgTypeItem.name == '头像' || currentImgTypeItem.name == '表情包' ">
			<worksList @stickImg="stickImg" :currentImgs="imgsList" :itemStyle="{
				width: '25%',
				height: '150rpx'
			}"></worksList>

		</template>
		<template v-if="currentImgTypeItem.name == '动态壁纸' || currentImgTypeItem.name == '壁纸' ">
			<worksList @stickImg="stickImg" :currentImgs="imgsList" :itemStyle="{
				'width':'33.33%',
				'height':'350rpx',
			}"></worksList>
		</template>

		<template v-if="currentImgTypeItem.name == '背景图' ">
			<worksList @stickImg="stickImg" :currentImgs="imgsList" :itemStyle="{
				width:'50%',
				'height':'200rpx',
			}"></worksList>
		</template>


		<dataNo v-if="imgsList.length == 0"></dataNo>

		<view class="" style="text-align: center;margin-top: 30rpx;" v-if="params.pageIndex != 1">
			{{none}}
		</view>

	</view>
</template>

<script>
	import imgTypeTab from "@/components/common/img-type-tab.vue"
	import worksList from "@/components/common/works-list.vue"
	export default {
		components: {
			imgTypeTab,
			worksList
		},
		data() {
			return {
				currentImgTypeItem: {},
				auditTypeList: [{
						name: "待审核",
						status: 2
					},
					{
						name: "已通过",
						status: 1
					},
					{
						name: "已拒绝",
						status: 3
					}
				],
				imgsList: [],
				imgTypeList: [],
				home_code: '',
				none: '',
				params: {
					pageIndex: 1,
					pageSize: 20,
				},
				total: 0,
			}
		},
		onReachBottom() {
			// this.adUnitIdbanner = this.advertisingData1(this.advertisingDataType.bannerList)
			if (this.total > this.params.pageIndex * this.params.pageSize) {
				this.params.pageIndex++;
				this.getImgsList();
			}
		},
		onPullDownRefresh() {
			this.getImgsList(true)
		},
		onLoad(e) {
			this.getImgTypeList()
			this.home_code = e.code
		},
		methods: {
			reset(refresh) {
				this.none = ''
				this.params.pageIndex = 1
				if (refresh) {
					this.imgsList = []
				}
			},
			// 图片类型tab
			tabSelect(item) {
				this.currentImgTypeItem = item
				this.getImgsList(true)
			},
			stickImg() {
				this.getImgsList(true)
			},
			// 获取图片类型列表
			async getImgTypeList() {
				var data = await this.$api.getData({
					dbName: "wx_img_type",
					sortRule: [{
						"name": "index",
						"type": "asc"
					}]
				}, true)
				this.imgTypeList = data.rows
				setTimeout(() => {
					if (this.imgTypeList[0] && this.$refs['imgTypeTab']) {
						this.currentImgTypeItem = this.imgTypeList[this.$refs['imgTypeTab'].TabCur]
						this.getImgsList()
					}
				}, 500)
			},
			// 获取图片
			async getImgsList(refresh) {
				var userInfo = uni.getStorageSync('user') || {}
				var auditTypeItem = this.auditTypeList[this.$refs['imgTypeTab1'].TabCur]
				if (refresh) {
					this.reset()
				}
				var data = await this.$api.getData({
					dbName: "wx_imgs",
					sortRule: [{
						"name": "is_top",
						"type": "desc"
					}],
					whereJson: {
						img_type: this.currentImgTypeItem.type || '',
						framer_id: this.home_code || '',
						user_id: userInfo.openid || '',
						status: auditTypeItem.status
					},
					pageIndex: this.params.pageIndex,
					pageSize: this.currentImgTypeItem.type == 1 || this.currentImgTypeItem.type == 4 ? 30 : 10
				})
				uni.stopPullDownRefresh();
				if (refresh) {
					this.reset(true)
				}
				if (data.rows.length != 0) {
					this.imgsList = [...this.imgsList, ...data.rows]
					this.total = data.total
				} else {
					this.none = '没有数据了'
				}
			},

			tabSelect1(item, index) {
				this.getImgsList(true)
			}
		}
	}
</script>

<style>
	page {
		background: #fff;
	}
</style>